<!-- 门店首页 -->
<template>
	<view class="page" :style="{'--color': color}">
		<backTop v-if='toTop'></backTop>

		<view class="topNav" :class="{'white': !toTop, 'color_22 bgwhite': toTop}">
			<view :style="{height: System.statusBarHeight + 'px'}"></view>
			<view class="p-left30 d-flex a-center" :style="{width: `${navWidth}px`, height: `${navHeight}px`}">
				<text class="iconfont icon-shouyeT211 size34" v-if="fromShare == 1" @click="backHome()"></text>
				<text class="iconfont icon-xiangzuo size34" v-else @click="back()"></text>
				<view class="search d-flex a-center m-left30" :class="{'bgf8': toTop}">
					<text class="iconfont icon-btn_search size40 m-right10"></text>
					<input class="flex-1" :value="searchTxt" confirm-type="search" placeholder="请输入搜索" :placeholder-class="toTop ? 'color_99': 'white'" @confirm="confirmSearch" />
					<text class="iconfont icon-close-f size36 m-left10" v-if='searchTxt' @click="all"></text>
				</view>
			</view>
		</view>

		<view class="storeSwipeBox p-re">
			<swiper class="swiper" circular autoplay :interval="3000" :duration="1000" v-if='shopData.merMemo'>
				<swiper-item v-for="(item,index) in shopData.merMemo" :key='index'>
					<view class="wh p-re" @click="previewImage(index)">
						<image :src="$imgUrls(item)" mode="aspectFill" class="wh"></image>
						<view class="s_mask wh p-ab"></view>
					</view>
				</swiper-item>
			</swiper>

			<view class="storeItem bgwhite p-ab">
				<image class="storeLogo p-ab" :src="shopData.logo ? $imgUrls(shopData.logo) : staticUrl + '/images/imageLoading.png'" mode="aspectFill"></image>
				<view class="collect-box flexac p-ab white" :class="{'bgCC': shopData.collect == 1}" @click="storeCollect">{{ shopData.collect == 1 ? '已关注' : '+ 关注' }}</view>

				<view>
					<view class="d-flex a-center">
						<view class="type size22 t-letter2 m-right10 f-shrink-0" v-if="shopData.bussName">{{ shopData.bussName }}</view>
						<view class="lines size40 bold">{{shopData.name}}</view>
						<text class="iconfont icon-qiyejianjie size36 m-left10" @click="toIntro" v-if="shopData.description"></text>
					</view>
					<view class="d-flex a-center m-top12">
						<view class="bold p-right20" :style="{color}" v-if="shopData.score && shopData.score != 0">
							<text class="size30">{{ shopData.score }}</text>
							<text class="h6">分</text>
						</view>
						<view class="h6 color_66 p-right20" v-if="shopData.sales">月销量{{ shopData.sales }}</view>
						<view class="h6 color_66" v-if="shopData.favorable && shopData.favorable != 0">好评{{ shopData.favorable }}%</view>
					</view>
					<view class="d-flex a-center color_66 m-top12">
						<view class="lines" v-if='shopData.address' @click="locate">
							<text class="iconfont icon-B size38 m-right10"></text>
							<text class="size26">{{shopData.address}}</text>
						</view>
						<view class="d-flex a-center" v-if="shopData.phone" @click="$common.Tel(shopData.phone)">
							<view class="line"></view>
							<text class="iconfont icon-dianhua size36"></text>
						</view>
					</view>
				</view>
				
			</view>
		</view>

		<view class="goodsTabs d-flex a-center" :style="{top: totalHeight + 'px'}" v-if="index_show_type == 1">
			<view class="d-flex a-center flex-1">
				<view class="goodsTabItem d-flex a-center" v-for="(item,index) in rank" :key='index' @click="chkRanks(index, item.type)">
					<text class="size26" :class="{thmeColor: rankTab == index}">{{item.txt}}</text>
					<view class="d-flex f-column m-left6" v-if='index == 1'>
						<text class="iconfont icon-shangsanjiaoxing" :class="{thmeColor: state == 1 && rankTab == 1}"></text>
						<text class="iconfont icon-xiasanjiaoxing" :class="{thmeColor: state == 2 && rankTab == 1}"></text>
					</view>
				</view>
			</view>
			<view class="changeBtn d-flex a-center">
				<image v-if='listType == 1' @click="listType = 2" :src="staticUrl + '/images/menu_ico.png'"></image>
				<image v-if='listType == 2' @click="waterfall(1)" :src="staticUrl + '/images/menu2_ico.png'"></image>
				<view class="line"></view>
				<text class="iconfont icon-fenlei size40 color_99" @click="toUrl('/otherPage/store/classifys?shopid=' + shopId + '&name=' + shopData.name)"></text>
			</view>
		</view>
		<view class="goodsTabs d-flex a-center" :style="{top: totalHeight + 'px'}" v-if="index_show_type == 2 && showIntro == 2">
			<view class="size26" :class="{'thmeColor': sortType == index+1}" @click="navClick(index+1)" v-for="(item,index) in ['综合','新加','热度']" :key="index">{{ item }}</view>
			<text class="iconfont icon-liebiao size40" @click="waterfall(2)" v-if='listType == 1'></text>
			<text class="iconfont icon-liebiao4 size40" @click="listType = 1" v-if='listType == 2'></text>
		</view>

		<view v-if="shopData.description && showIntro == 1">
			<u-parse :content="shopData.description" :domain="imgUrl"></u-parse>
		</view>

		<view class="bgwhite" v-if="goodsData && goodsData.length">
			<!-- 商品 -->
			<view class="goodsBox" v-if="index_show_type == 1">
				<GoodsList hot='1' :goodsData='goodsData' :type='listType'></GoodsList>
			</view>

			<!-- 文章 -->
			<view v-if="index_show_type == 2">
				<view class="p-left30 p-right30" v-if="listType == 1">
					<view class="p-top30 p-bot30 bot" v-for="(item,index) in goodsData" :key="index" @click="$pop.artDetails(item)">
						<!-- 没有图片 -->
						<view class="size32 ellipsis_2" v-if="!item.website_article_img && !item.atlasArr">{{ item.website_article_title }}</view>
						<!-- 右边小图 -->
						<view class="d-flex" v-else-if="item.website_article_img && !item.atlasArr">
							<view class="flex-1 m-right30">
								<view class="size32 ellipsis_2 m-bot20">{{ item.website_article_title }}</view>
								<view class="size28 color_77 ellipsis">{{ item.website_article_info }}</view>
							</view>
							<image :src="$imgUrls(item.website_article_img)" mode="aspectFill" class="small_img"></image>
						</view>
						<!-- 一张大图 -->
						<view v-else-if="item.atlasArr.length == 1">
							<view class="size32 ellipsis_2">{{ item.website_article_title }}</view>
							<image :src="$imgUrls(item.atlasArr[0])" mode="aspectFill" class="big_img m-top30"></image>
						</view>
						<!-- 多图 -->
						<view v-else-if="item.atlasArr.length > 1">
							<view class="size32 ellipsis_2">{{ item.website_article_title }}</view>
							<scroll-view scroll-x class="scroll-row m-top20">
								<image :src="$imgUrls(subItem)" mode="aspectFill" class="more_img" v-for="(subItem,subIndex) in item.atlasArr" :key="subIndex"></image>
							</scroll-view>
						</view>
						<view class="color_77 m-top40">
							<text class="m-right12" v-if="item.website_article_views != 0">{{ item.website_article_views }}阅读</text>
							<text class="m-right12" v-if="item.allZan != 0">{{ item.allZan }}点赞</text>
							<text v-if="item.allComment != 0">{{ item.allComment }}评论</text>
						</view>
					</view>
				</view>

				<view class="padding20" v-if="listType == 2">
					<article-flow v-model="goodsData"></article-flow>
				</view>
			</view>

			<view class="DiLine" v-if='showLine'>------  我也是有底线的  ------</view>
		</view>

		<view class="m-top300" v-if="show">
			<u-loading-icon :show="show" size="48"></u-loading-icon>
		</view>
		<empty type='1' v-if='noData' cat='4' msg='还没有相关数据哦~'></empty>
		<showModel @cancelFunc='showModal = false' goHome='0' v-if='showModal' type='2'></showModel>
		<SharePoster v-if='showShareQr' :myid='shopId' type='9' :pageType='"15&shop_id="+shopId' @closePoster='showShareQr = false'></SharePoster>

		<view class="float-nav">
			<view class="item bgwhite bor_radius flexac" @click.stop="handleShare">
				<text class="iconfont icon-fenxiang1 size42"></text>
			</view>
			<view class="item bgwhite bor_radius flexac m-top20" v-if="shopData.add_group_code" @click.stop="showWechat = true">
				<text class="iconfont icon-weixin color_wechat size50"></text>
			</view>
		</view>

		<view class="mask flexac f-column" @click="showWechat = false" v-if="showWechat">
            <image class="viewbox5" :src="$imgUrls(shopData.add_group_code)" mode="aspectFit" show-menu-by-longpress style="height: 890rpx;" @click.stop></image>
            <text class="iconfont icon-guanbi size60" @click="showWechat = false"></text>
        </view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import GoodsList from '@/components/goodsList.vue'
	import articleFlow from '@/components/articleFlow.vue';
	import SharePoster from "@/components/sharePoster.vue"
	export default {
		components:{GoodsList, articleFlow, SharePoster},
		data() {
			return {
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl,
				toTop: false,
				fromShare: 0,
				shopId: '',
				shopData: '',
				goodsData: [],
				type: '', // 排序类型
				state: 0, // 价格排序 1从低到高 2从高到低
				page: 1,
				loadMore: false, // 是否上拉加载更多
				showLine: false,
				noData: false,
				rank:[
					{ txt: '综合', type: '' },
					{ txt: '价格', type: 1 },
					{ txt: '销量', type: 2 },
					{ txt: '热度', type: 3 },
					{ txt: '好评', type: 4 }
				],
				rankTab: 0, // 排序tab的下标
				searchTxt: "",
				showModal: false,
				listType: '1', // 1左右瀑布流布局 2一行一个
				show: false, // 是否显示加载动画

				// 1显示商品 2显示文章
				index_show_type: 1, 
				sortType: 1,
				showIntro: 0,
				showShareQr: false,
				showWechat: false
			}
		},
		onLoad(opts) {
			if(opts.fromShare) this.fromShare = opts.fromShare
			if(opts.shop_id){
				this.shopId = opts.shop_id
				this.getShopData()
			}
		},
		computed:{
			...mapState(['color','System','navWidth','navHeight','vid','totalHeight','share']),
		},
		methods: {
			handleShare() {
				if(!this.vid) return this.showModal = true
				this.showShareQr = true
			},
			toIntro() {
				uni.setStorageSync('description', this.shopData.description)
				this.toUrl('/moneyPage/distributors/spreadRules?type=2')
			},
			getShopData(){ // 获取店铺信息
				this.$http.post({
					url: '/singleSaleApi/storesIndex',
					data: {
						shop_id: this.shopId
					}
				}).then(res => {
					if (res.code == 100 && res.data) {
					    this.shopData = res.data
						this.index_show_type = res.data.index_show_type
						this.getList()
					}
				})
			},
			getList(){
				if(this.index_show_type == 1) this.getSingle()
				if(this.index_show_type == 2) this.getWebsiteList()
			},
			getSingle(){ // 店铺商品排序
				this.show = true
				this.loadMore = false
				this.showLine = false
				this.noData = false
				this.$http.post({
					url: '/singleSaleApi/storeGoodsGroups',
					data: {
						shop_id: this.shopId,
						type: this.type, // 1价格 2销量 3热度 4好评
						state: this.state, // 1价格从低到高 2价格从高到低 
						page: this.page,
						pageNum: 10,
					}
				}).then(res => {
					this.show = false
					if (res.code == 100 && res.data) {
						this.goodsData = this.goodsData.concat(res.data)
						if(res.data.length > 9){
							this.loadMore = true
							this.page ++
						}
					}
					if(this.goodsData.length < 1){
						this.noData = true
					}
					if(this.goodsData && this.goodsData.length > 9 && (!res.data || res.data.length < 10)){
						this.showLine = true
					}
				})
			},
			getWebsiteList(){
				this.show = true
				this.loadMore = false
				this.noData = false
				this.$http.get({
					url: '/zzj_singleSaleApi/getArticle',
					data: {
						shop_id: this.shopId,
						sortType: this.sortType,
						queryStr: this.searchTxt,
						page: this.page
					}
				}).then(res=>{
					this.show = false
					if(res.errcode != '00000') return this.$Toast(res.msg)
					let result = res.data || []
					this.goodsData = this.goodsData.concat(result)
					if(result.length > 9) {
						this.loadMore = true
						this.page ++
					}
					if(this.showIntro == 0) {
						this.showIntro = this.goodsData.length < 3 ? 1 : 2
					}
					if(this.goodsData.length < 1) {
						if(this.showIntro == 1 && this.shopData.description) return
						this.noData = true
					}
				})
			},
			dataInit(){
				this.page = 1
				this.goodsData = []
				this.getWebsiteList()
			},
			navClick(sortType){
				this.sortType = sortType
				this.dataInit()
			},
			confirmSearch(e){
				if(e.detail.value){
					this.goodsData = []
					this.show = true
					this.searchTxt = e.detail.value
					this.page = 1
					this.rankTab = 0
					this.type = ''
					if(this.index_show_type == 2) return this.getWebsiteList()
					this.$http.post({
						url: '/singleSaleApi/searchStoreGoods',
						data: {
							shop_id: this.shopId,
							name: this.searchTxt
						}
					}).then(res => {
						this.show = false
						if (res.status && res.data) {
						    this.noData = false
						    this.goodsData = res.data
						}else{
						    this.noData = true
						}
					})
				}else{
					this.all()
				}
			},
			previewImage(index){
				let arr = []
				for (let i in this.shopData.merMemo) {
					arr.push(this.$imgUrls(this.shopData.merMemo[i]))
				}
				uni.previewImage({
					current: index,
					urls: arr,
					indicator: "number",
					loop: true
				})
			},
			storeCollect(){ // 收藏门店
				if(!this.vid) return this.showModal = true
				this.$http.post({
					url: '/singleSaleApi/store_collect',
					data: {
						store_id: this.shopId
					}
				}).then(res => {
					if(res.code != 200) return this.$Toast(res.msg)
					this.shopData.collect = this.shopData.collect == 0 ? 1 : 0
				})
			},
			locate(){
				uni.openLocation({
					latitude: parseFloat(this.shopData.latitude),
					longitude: parseFloat(this.shopData.longitude),
					name: this.shopData.name,
					address: this.shopData.address,
					complete(res){
						console.log(res)
					}
				})
			},
			waterfall(num){
				this.listType = num
				this.goodsData = []
				this.page = 1
				this.getList()
			},
			chkRanks(index, type){
				this.goodsData = []
				this.page = 1
				if(index == 1){ // 价格
					this.state = this.state == 1 ? 2 : 1
				}else{
					this.state = 0
				}
				this.rankTab = index
				this.type = type
				this.getSingle()
			},
			all(){ // 重置
				this.searchTxt = ''
				if(this.index_show_type == 2) return this.dataInit()
				this.chkRanks(0, '')
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.toTop = true
			} else {
				this.toTop = false
			}
		},
		onReachBottom() {
			if(this.loadMore){
				this.getList()
			}
		},
		onShareTimeline() {
			return {
				title: this.shopData.name,
				path: '/pages/index/index?share_v_id=' + this.vid + '&pageType=15&shop_id=' + this.shopId,
				imageUrl: this.$imgUrls(this.shopData.logo)
			}
		},
		onShareAppMessage() {
			return {
				title: this.shopData.name,
				desc: this.shopData.address,
				path: '/pages/index/index?share_v_id=' + this.vid + '&pageType=15&shop_id=' + this.shopId,
				imageUrl: this.$imgUrls(this.shopData.logo)
			}
		},
	}
</script>

<style lang="scss" scoped>
.page {
	padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
.topNav {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 20;
	.search{
		width: 400rpx;
		height: 54rpx;
		background: rgba(255,255,255,0.08);
		padding: 0 20rpx;
		border-radius: 30rpx;
	}
}
.storeSwipeBox{
	height: 420rpx;
	background: var(--color);
	.swiper {
		height: 240rpx;
	}
	.s_mask  {
		background: rgba(0,0,0,0.2);
		top: 0;
		left: 0;
	}
	.storeItem{
		width: 100%;
		height: 200rpx;
		box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0,0,0,0.1);
		border-radius: 30rpx 30rpx 0 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		padding: 20rpx 180rpx 20rpx 30rpx;
		.storeLogo{
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
			border: 1rpx solid #ddd;
			box-sizing: border-box;
			right: 30rpx;
			top: -10rpx;
			z-index: 15;
		}
		.collect-box{
			width: 110rpx;
			height: 40rpx;		
			background: var(--color);		
			border-radius: 50rpx;
			right: 40rpx;
			top: 130rpx;
			z-index: 15;
		}
		.type { 
			padding: 0 10rpx;     
			border: 1rpx solid var(--color);
			border-radius: 2rpx;
			color: var(--color);
		}
	}
}
.goodsTabs{
	position: sticky;
	z-index: 20;
	.goodsTabItem{
		padding: 0 20rpx 0 30rpx;
		.icon-shangsanjiaoxing,.icon-xiasanjiaoxing{
			font-size: 20rpx;
			margin: -4rpx 0;
			color: #AFAFAF;
		}
	}
	.changeBtn{
		padding: 0 30rpx;
		image{
			width: 30rpx;
			height: 30rpx;
		}
	}
}
.goodsBox{
	padding: 24rpx 0;
}
.line {
	width: 1rpx;
	height: 30rpx;
	background: #d6d7d9;
	margin: 0 30rpx;
}
// 文章
.small_img {
    width: 200rpx;
    height: 120rpx;
}
.big_img {
    height: 340rpx;
}
.more_img {
    width: 210rpx;
    height: 180rpx;
    &:not(:last-child){
        margin-right: 30rpx;
    }
}
.float-nav {
	position: fixed;
	right: 24rpx;
	bottom: calc(250rpx + constant(safe-area-inset-bottom));
	bottom: calc(250rpx + env(safe-area-inset-bottom));
	z-index: 30;
	.item {
		width: 80rpx;
		height: 80rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,.16);
	}
}
</style>
